import React, { useState } from 'react';
import { Card, Input } from 'antd';

// 使用 React.memo 包裹子组件
// input输入不会导致ChildComponent重新渲染
const ChildComponent = React.memo(({ text }: { text: string }) => {
  console.log('子组件渲染:', text);

  return (
    <div style={{ margin: '16px 0', padding: 16, background: '#f5f5f5' }}>
      显示文本: {text}
    </div>
  );
});

const App = () => {
  const [inputText, setInputText] = useState('');
  const [text, setText] = useState('Hello');

  return (
    <Card title="优化后版本">
      <Input
        value={inputText}
        onChange={e => setInputText(e.target.value)}
        placeholder="随便输入点什么"
      />
      <ChildComponent text={text} />
    </Card>
  );
};

export default App;
